<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <!-- 查询条件 -->
      <content-block>
        <el-form :model="searchForm" label-width="100px" class="search-form">
          <el-row>
            <!--            <el-col :span="8">-->
            <!--              <el-form-item label="单位编号">-->
            <!--                <unit-rpc ref="unitRpc" @unitRpcCallBack="unitRpcCallBack" style="width: 350px"/>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :span="8">-->
            <!--              <el-form-item label="单位名称">-->
            <!--                <el-input v-model="searchForm.aae734" placeholder="请输入单位名称" :disabled="true" />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <el-col :span="8">
              <el-form-item label="人员编号">
                <person-rpc ref="personRpc" @personRpcCallBack="personRpcCallBack" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名">
                <el-input v-model="searchForm.aae734" placeholder="请输入姓名" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="text-right" style="float: right">
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="经办时间">-->
          <!--                <el-date-picker-->
          <!--                  v-model="searchForm.startDate"-->
          <!--                  type="daterange"-->
          <!--                  start-placeholder="开始日期"-->
          <!--                  end-placeholder="结束日期"-->
          <!--                  :picker-options="pickerOptions"-->
          <!--                  style="width: 100%"-->
          <!--                ></el-date-picker>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          </el-row>
        </el-form>
      </content-block>
      <content-block>
        <crudOperation :permission="permission" />
        <!--表单组件-->
        <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="1000px">
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="当事人编号" prop="aaz010">
                  <!--                <el-input v-model="form.aaz010" />-->
                  <!--                  <unit-rpc ref="unitRpc" style="width: 230px" :aab001disabled="aab001Disabled" @unitRpcCallBack="unitRpcCallBack" />-->
                  <person-rpc ref="personRpc" style="width: 380px" :aab001disabled="aab001Disabled" @personRpcCallBack="personRpcCallBack" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地方银行行别代码" prop="aaf216">
                  <!--                <el-input v-model="form.aaf200" />-->
                  <bank-rpc ref="bankRpc" style="width: 380px" @bankRpcCallBack="bankRpcCallBack" />
                </el-form-item>
              </el-col>
<!--              <el-col :span="8">-->
<!--                <el-form-item label="当事人类别" prop="aaa028">-->
<!--                  <el-select v-model="form.aaa028" placeholder="请选择" :disabled="true">-->
<!--                    <el-option v-for="item in dict.aaa028" :key="item.id" :value="item.value" :label="item.label" />-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="当事人名称" prop="aae734">
                  <el-input v-model="form.aae734" :disabled="true" style="width: 240px"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行行别代码">
                  <el-input v-model="form.aaf200" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="地方银行名称">
                  <el-input v-model="form.aaf217" :disabled="true" />
                </el-form-item>
              </el-col>
              <!--            <el-col :span="8">-->
              <!--              <el-form-item label="银行编号">-->
              <!--                <el-input v-model="form.aae008" />-->
              <!--              </el-form-item>-->
              <!--            </el-col>-->
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="人行支付系统行号">
                  <el-input v-model="form.aaf002" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行户名" prop="aae009">
                  <el-input v-model="form.aae009" :rows="3" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行账号" prop="aae010">
                  <el-input v-model="form.aae010" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="开户行名称" prop="aae668">
                  <el-input v-model="form.aae668" />
                </el-form-item>
              </el-col>
              <el-col :span="8" />
              <el-col :span="8">
                <el-form-item label="险种类型">
                  <el-select v-model="form.aae140" placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in dict.aae140" :key="item.id" :value="item.value" :label="item.label" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开始年月">
                  <el-date-picker v-model="form.aae041" type="datetime" format="yyyy-MM" style="width: 240px"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="终止年月">
                  <el-date-picker v-model="form.aae042" type="datetime" format="yyyy-MM" style="width: 240px"/>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="备注">
                  <el-input v-model="form.aae013" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :height="550" :data="crud.data" border :header-cell-style="{background:'#f5f7fa', color:'#777'}" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="aaz010" label="当事人编号" width="150px" />
          <el-table-column prop="aae734" label="当事人名称" width="150px" fixed="left" />
          <el-table-column prop="aaa028" label="当事人类别" :formatter="formatter" />
          <el-table-column prop="aaf200" label="银行行别代码" width="120px" :formatter="formatter" />
          <el-table-column prop="aaf216" label="地方银行行别代码" width="120px" :formatter="formatter" />
          <el-table-column prop="aaf217" label="地方银行名称" width="200px" />
          <!--        <el-table-column prop="aae008" label="银行编号" />-->
          <el-table-column prop="aaf002" label="支付行号" width="120px" />
          <el-table-column prop="aae009" label="银行户名" />
          <el-table-column prop="aae010" label="银行账号" width="200px" />
          <el-table-column prop="aae668" label="开户行名称" width="200px" />
          <!--        <el-table-column prop="aaa082" label="当事人银行账号用途类别" />-->
          <el-table-column prop="aae140" label="险种类型" :formatter="formatter" width="150px" />
          <el-table-column prop="aae041" label="开始年月" :formatter="formatDate" />
          <el-table-column prop="aae042" label="终止年月" :formatter="formatDate" />
          <el-table-column prop="aae100" label="有效标志" />
          <el-table-column prop="aae013" label="备注" />
          <!--        <el-table-column prop="aaz003" label="当事人银行id" />-->
          <el-table-column v-if="checkPer(['admin','basicAe03:edit','basicAe03:del'])" label="操作" width="150px" align="center" fixed="right">
            <template slot-scope="scope">
              <udOperation
                :data="scope.row"
                :permission="permission"
              />
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </content-block>
    </div>
  </div>
</template>

<script>
import crudBasicAe03 from './basicAe03'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
// import UnitRpc from '@/views/ynsb_comm/comm/module/unitRpc'
import BankRpc from '@/views/ynsb_comm/comm/module/bankRpc'
import ContentBlock from '@/components/labers/contentBlock'
import PersonRpc from '@/views/ynsb_comm/comm/module/personRpc'

// eslint-disable-next-line no-undef
const defaultForm = { aaz010: null, aaa028: '20', aaf200: null, aaf216: null, aaf217: null, aae008: null, aaf002: null, aae009: null, aae010: null, aae668: null, aaa082: null, aae140: '120', aae041: null, aae042: null, aae100: null, aae013: null, aaz003: null, aae734: null }
export default {
  name: 'BasicAe03',
  // eslint-disable-next-line vue/no-unused-components
  components: { PersonRpc, ContentBlock, BankRpc, pagination, crudOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '当事人银行信息采集', url: 'api/basicAe03', idField: 'aaz003', sort: 'aaz003,desc', crudMethod: { ...crudBasicAe03 }})
  },
  // 数据字典
  dicts: ['aae140', 'aaa028', 'aaf200', 'aaf216'],
  data() {
    return {
      searchForm: {
        aaz010: '', // 当事人编号
        aae734: '' // 当事人名称
      },
      permission: {
        add: ['admin', 'basicAe03:add'],
        edit: ['admin', 'basicAe03:edit'],
        del: ['admin', 'basicAe03:del']
      },
      rules: {
        aaz010: [
          { required: true, message: '当事人编号不能为空', trigger: 'blur' }
        ],
        aaa028: [
          { required: true, message: '当事人类别不能为空', trigger: 'blur' }
        ],
        aaf216: [
          { required: true, message: '地方银行编码不能为空', trigger: 'blur' }
        ],
        aae009: [
          { required: true, message: '银行户名不能为空', trigger: 'blur' }
        ],
        aae010: [
          { required: true, message: '银行账号不能为空', trigger: 'blur' }
        ],
        aae668: [
          { required: true, message: '开户行名称不能为空', trigger: 'blur' }
        ]
      },
      aab001Disabled: false
    }
  },
  watch: {
    'crud.status.cu'(val) {
      if (this.form.aaz010 !== null) {
        this.aab001Disabled = true
      } else {
        this.aab001Disabled = false
      }
      if (this.crud.status.cu === 1) {
        setTimeout(async() => {
          // await this.$refs.unitRpc.restAab001(this.form.aaz010)
          // await this.$refs.unitRpc.getSearchResults(this.form.aaz010)
          await this.$refs.personRpc.getSearchResults(this.form.aaz010)
          await this.$refs.personRpc.restAac001(this.form.aaz010)
          await this.$refs.bankRpc.restAaf216(this.form.aaf216)
        }, 500) // 延迟1秒后显示弹窗
        setTimeout(async() => {
          // this.unitRpcCallBack(this.$refs.unitRpc.personData[0])
          this.personRpcCallBack(this.$refs.personRpc.personData[0])
        }, 1000)
      } else {
        this.form.aae734 = ''
        this.$refs.personRpc.restAac001('')
      }
    }
  },
  methods: {
    formatter(row, column, cellValue) {
      // 根据 aae140 的值进行转码
      const key = column.property
      const data = this.dict[key]
      const dataList = data.filter(item => item.value === cellValue)
      console.log(dataList, 'data')
      if (dataList !== null && dataList !== [] && dataList !== undefined && dataList.length > 0) {
        return dataList[0].label
      } else {
        return cellValue
      }
    },
    bankRpcCallBack(item) {
      console.log(item, '银行信息回调')
      this.$nextTick(() => {
        this.$refs.form.validateField('aaf216')// 单独校验当前字段
      })
      this.form.aaf200 = item.aaf200
      this.form.aaf216 = item.aaf216
      this.form.aaf217 = item.aaf217
      this.form.aaf002 = item.aaf002
    },
    // 日期格式转换
    formatDate(row, column, cellValue) {
      // 格式化日期为 YYYY-MM-DD
      if (cellValue !== null && cellValue !== undefined) {
        const date = new Date(cellValue)
        const year = date.getFullYear()
        const month = (date.getMonth() + 1).toString().padStart(2, '0')
        return `${year}-${month}`
      } else {
        return '--'
      }
    },
    search() {
      // 假设查询的数据
      console.log(this.searchForm, 'this.searchForm')
      crudBasicAe03.getAe03({ ...this.searchForm }).then(res => {
        console.log(res, 'res')
        this.crud.data = res.content
      })
    },
    reset() {
      this.$refs.unitRpc.restAab001('')
      this.searchForm = {
        aab001: '',
        aae734: ''
      }
      this.tableData = [] // 清空表格数据
    },
    unitRpcCallBack(item) {
      this.$nextTick(() => {
        this.$refs.form.validateField('aaz010')// 单独校验当前字段
      })
      console.log(item, '00000000000000')
      this.form.aaz010 = item.aab001
      this.form.aae734 = item.aab004
      this.searchForm = {
        aab001: item.aab001,
        aaz010: item.aab001,
        aae734: item.aab004
      }
    },
    personRpcCallBack(item) {
      this.$nextTick(() => {
        this.$refs.form.validateField('aaz010')// 单独校验当前字段
      })
      this.form.aaz010 = item.aac001
      this.form.aae734 = item.aac003
      this.searchForm = {
        aac001: item.aac001,
        aaz010: item.aac001,
        aae734: item.aac003
      }
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }
  }
}
</script>

<style scoped>

</style>
